<template>
  <div class="error-page window-height window-width bg-light column items-center no-wrap">
    <div class="error-code bg-primary flex flex-center">
      {{code}}
    </div>
    <div>
      <div class="error-card shadow-4 bg-white column flex-center no-wrap">
        <q-icon name="error_outline" color="grey-5" />
        <p class="caption text-center">{{msg}}</p>
        <p class="text-center group">
          <q-btn
            v-if="canGoBack"
            color="primary"
            push
            @click="goBack"
            icon="keyboard_arrow_left"
          >
           返回
          </q-btn>
          <q-btn
            color="primary"
            push
            @click="$router.replace('/')"
            icon-right="home"
          />
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { QBtn, QIcon } from "quasar";

export default {
  components: {
    QBtn,
    QIcon
  },
  data() {
    return {
      code: null, //错误码
      msg: null, //错误消息
      msgOption: {
        400: "请求异常",
        401: "权限不足，登录信息过期或未有足够权限",
        403: "资源受限，拒绝访问",
        404: "不好意思，资源不存在或已被删除",
        504: "网关错误，服务端未响应请联系系统管理员"
      },
      canGoBack: window.history.length > 1
    };
  },
  mounted() {
    const _code = this.$route.query.code;
    this.code = _code;
    this.msg = this.msgOption[_code] || "非法请求"
  },
  methods: {
    goBack() {
      window.history.go(-1);
    }
  }
};
</script>

<style lang="stylus">
.error-page {
  .error-code {
    height: 40vh;
    width: 100%;
    padding-top: 6vh;
    font-size: 20vmax;
    color: rgba(255, 255, 255, 0.2);
    overflow: hidden;
  }

  .error-card {
    border-radius: 2px;
    margin-top: -50px;
    width: 80vw;
    max-width: 600px;
    padding: 25px;

    > i {
      font-size: 5rem;
    }
  }
}
</style>
